<template>
  <div>
    <pre>
      输入框组件名：el-input
      属性：
          v-model:双向绑定
          prefix-icon：输入框头部图标
          show-password：是否显示切换密码图标

      按钮组件名：el-button
      属性：type="primary/success/info/warning/danger" 主要按钮，蓝色风格
      表单
        组件名：el-form
        使用：
           el-form标签
                label-width:标题宽度
               el-form-item  子项
                  label:当前项的标题

        表单验证(最基本表单验证)：
            1：表单元素双向绑定
            2：el-form
                ：model="整个表单元素的值"
                rules:规则
                   {
                    prop的值：[
                      {required:true,message:'错误信息',trigger:'blur/change'},
                      {min:最小长度,max:最大长度,message:'错误信息',trigger:'blur/change'},
                      {pattern:正则验证,message:'错误信息',trigger:'blur/change'}
                    ]
                   }
            3：el-form-item
               prop="表单元素项的对应的字段名"
          注意点：
            required写错：没有必填的红点
            message写错：英文提示
            trigger写错：它会使用默认的触发方式，大部分是change,也有blur

       全局表单验证
         1：el-form  ref="form"
         2:this.$refs.form.validate((result)=>{
          result:boolean
                true:验证通过
                false:验证失败
         })

       局部表单验证
         1：el-form  ref="form"
         2:this.$refs.form.validateField('需要验证项的prop的值',(errorMessage)=>{
             errorMessage有值说明没通过
                         无值说明通过了
         })
            this.$refs.form.validateField(['username','其它项的prop的值'],)

         自定义表单验证
            rules:规则
              rules:{
                 prop的值:[
                 {
                  validator:(rule,value,callback)=>{
                    rule:规则，当前验证项的规则，几乎不用
                    value:当前验证项的值
                    callback:
                        验证通过  callback()
                        验证失败  callback(new Error('错误信息'))
                  }
                 }
                 ]
              }

         message组件使用
         vue文件中写法
          完整写法
          this.$message({
            message:'内容'，
            type:'success/error/info/warning'
          })
          常规写法
          this.$message.success('消息内容')
          js中
          import {Message} from 'element-ui'
          Message===this.$message
          Message.success('消息内容')
    </pre>
    <el-input v-model="msg" prefix-icon="el-icon-user-solid" />
    <el-button type="primary">按钮</el-button>
    <hr>
    <!-- 表单验证需求：1：用户名密码必填，2：密码长度6-12位 3:用户名是手机号-->
    <h3>表单</h3>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" />
        <el-button @click="getCode">获取验证码</el-button>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" show-password />
      </el-form-item>
      <el-form-item>
        <el-button @click="submit">全局表单验证</el-button>
      </el-form-item>
    </el-form>
    <hr>
    <!-- ref
    ref:获取dom（原生标签）,获取组件实例对象（组件标签）
    -->
    <HmForm ref="hmForm" />
    <el-button
      @click="btnClick('hmForm')"
    >我要调用hmform组件内的validate方法</el-button>
  </div>
</template>
<script>
import Form from './components/form'
export default {
  components: {
    HmForm: Form
  },
  data() {
    return {
      msg: '86期,hello',
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '必填', trigger: 'change' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请正确输入手机号',
            trigger: 'change'
          },
          {
            validator: (rule, value, callback) => {
              // 需求：验证你的手机号是否注册过，只验证是不是13800000002是，验证不通过，不是验证通过
              const result = value === '13800000002'
              result ? callback(new Error('该手机号已注册过')) : callback()
            },
            trigger: 'change'
          }
        ],
        password: [
          { required: true, message: '必填', trigger: 'change' },
          { min: 6, max: 12, message: '请输入6-12位密码', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    btnClick(str) {
      this.$refs[str].validate()
    },
    submit() {
      this.$refs.form.validate((result) => {
        console.log(result)
      })
    },
    getCode() {
      this.$refs.form.validateField(['username'], (msg) => {
        if (msg === '') {
          console.log('验证通过了')
        } else {
          console.log('验证失败了')
        }
        // console.log(msg)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// css用不上去：1：权重不够  2：根本没有选中
// scoped需要深度选择  ::v-deep
//  vue3  :deep()
::v-deep .el-input__prefix {
  color: red;
}
</style>
